<template>
  <view class="members-container">
    <!-- 顶部统计 -->
    <view class="stats-header">
      <view class="family-info">
        <image 
          class="family-avatar" 
          :src="safeImageUrl(familyInfo?.avatarUrl, 'family')"
          mode="aspectFill"
        />
        <view class="family-details">
          <text class="family-name">{{ familyInfo?.name || '我的家庭' }}</text>
          <text class="member-count">{{ (members || []).length }}位成员</text>
        </view>
      </view>
      <view class="action-btn" @click="showInviteModal">
        <text class="icon">👥</text>
        <text>邀请成员</text>
      </view>
    </view>

    <!-- 家族树视图切换 -->
    <view class="view-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentView === 'tree' }"
        @click="switchView('tree')"
      >
        <text class="tab-icon">🌳</text>
        <text>家族树</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentView === 'list' }"
        @click="switchView('list')"
      >
        <text class="tab-icon">📋</text>
        <text>成员列表</text>
      </view>
    </view>

    <!-- 家族树视图 -->
    <view class="tree-view" v-if="currentView === 'tree'">
      <scroll-view scroll-x="true" class="tree-scroll">
        <view class="tree-container">
          <!-- 按辈分层级显示 - 详细版本 -->
          <view 
            class="tree-level" 
            v-for="generation in existingGenerations" 
            :key="generation"
          >
            <view class="generation-header">
              <view class="generation-label">{{ getGenerationName(generation) }}</view>
              <view class="generation-description">{{ getGenerationDescription(generation) }}</view>
            </view>
            
            <view class="members-row">
              <view 
                class="member-node" 
                :class="getMemberNodeClass(generation)"
                v-for="member in membersByGeneration[generation]" 
                :key="member.id"
                @click="showMemberDetail(member)"
              >
                <image 
                  class="member-avatar" 
                  :src="safeImageUrl(member.userAvatarUrl || member.avatarUrl, 'avatar')"
                  mode="aspectFill"
                />
                <text class="member-name">{{ member.nickname || member.username || '成员' }}</text>
                <text class="member-relation">{{ member.relationship || '成员' }}</text>
                <view class="admin-badge" v-if="member.role === 'admin'">管理员</view>
              </view>
            </view>
            
            <!-- 连接线（除了最后一个辈分） -->
            <view 
              class="tree-connector" 
              v-if="generation !== existingGenerations[existingGenerations.length - 1]"
            >
              <view class="connector-line"></view>
            </view>
          </view>
          
          <!-- 空状态 -->
          <view class="empty-tree" v-if="existingGenerations.length === 0">
            <text class="empty-icon">🌳</text>
            <text class="empty-text">还没有家族成员</text>
            <text class="empty-desc">邀请家人加入，开始构建家族树</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 列表视图 -->
    <view class="list-view" v-if="currentView === 'list'">
      <scroll-view scroll-y class="members-list-container">
        <view class="member-item" v-for="member in (members || [])" :key="member.id">
          <image class="member-avatar" :src="safeImageUrl(member.userAvatarUrl || member.avatarUrl, 'avatar')" mode="aspectFill"></image>
          <view class="member-info">
            <text class="member-name">{{ member.nickname || member.username || '家庭成员' }}</text>
            <text class="member-relationship">{{ member.relationship || '成员' }}</text>
            <text class="member-role" v-if="member.role === 'admin'">管理员</text>
          </view>
          <view class="member-actions">
            <button class="action-btn edit-btn" @click="openEditModal(member)">编辑</button>
            <button class="action-btn remove-btn" v-if="isAdmin && member.userId !== userInfo?.id" @click="handleRemove(member.id)">移除</button>
          </view>
        </view>
      </scroll-view>

      <!-- Edit Member Modal -->
      <view class="modal-overlay" v-if="showEditModal" @click.self="closeEditModal">
        <view class="modal-content" @click.stop>
          <text class="modal-title">编辑成员信息</text>
          
          <!-- 关系输入 -->
          <view class="form-item">
            <text class="label">家庭关系</text>
            <input 
              class="modal-input" 
              v-model="editableMember.relationship" 
              placeholder="如：父亲、母亲、儿子、女儿等"
              @click.stop
              @focus.stop
            />
          </view>
          
          <!-- 辈分选择 -->
          <view class="form-item">
            <text class="label">辈分</text>
            <picker 
              :range="generationOptions" 
              :range-key="'label'"
              :value="selectedGenerationIndex"
              @change="onGenerationChange"
              @click.stop
            >
              <view class="picker-display">
                <text>{{ generationOptions[selectedGenerationIndex].label }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <!-- 角色选择 -->
          <view class="form-item">
            <text class="label">管理权限</text>
            <picker 
              :range="roleOptions" 
              :range-key="'label'"
              :value="selectedRoleIndex"
              @change="onRoleChange"
              @click.stop
            >
              <view class="picker-display">
                <text>{{ roleOptions[selectedRoleIndex].label }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <view class="modal-actions">
            <button class="cancel-btn" @click="closeEditModal">取消</button>
            <button class="save-btn" @click="handleUpdate">保存</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="(members || []).length === 0">
      <text class="empty-icon">👥</text>
      <text class="empty-text">还没有家族成员</text>
      <text class="empty-desc">邀请家人加入，开始记录家族故事</text>
      <view class="empty-action" @click="showInviteModal">
        <text>立即邀请</text>
      </view>
    </view>

    <!-- 邀请成员弹窗 -->
    <view class="modal-overlay" v-if="showInvite" @click="hideInviteModal">
      <view class="invite-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">邀请家族成员</text>
          <text class="close-btn" @click="hideInviteModal">✕</text>
        </view>
        <view class="modal-body">
          <view class="invite-code-section">
            <text class="label">家庭邀请码</text>
            <view class="code-container">
              <text class="invite-code">{{ familyInfo?.inviteCode || 'LOADING...' }}</text>
              <view class="copy-btn" @click="copyInviteCode">
                <text>复制</text>
              </view>
            </view>
            <text class="code-desc">分享此邀请码给家人，他们可以通过此码加入家庭</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="btn btn-secondary" @click="hideInviteModal">关闭</view>
        </view>
      </view>
    </view>

    <!-- 成员详情弹窗 -->
    <view class="modal-overlay" v-if="showDetail" @click="hideMemberDetail">
      <view class="detail-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">成员信息</text>
          <text class="close-btn" @click="hideMemberDetail">✕</text>
        </view>
        <view class="modal-body" v-if="selectedMember">
          <view class="member-profile">
            <image 
              class="profile-avatar" 
              :src="safeImageUrl(selectedMember.userAvatarUrl || selectedMember.avatarUrl, 'avatar')"
              mode="aspectFill"
            />
            <text class="profile-name">{{ selectedMember.nickname }}</text>
            <text class="profile-relation">{{ selectedMember.relationship || '家族成员' }}</text>
          </view>
          
          <view class="member-details">
            <view class="detail-item">
              <text class="detail-label">角色</text>
              <text class="detail-value">{{ selectedMember.role === 'admin' ? '管理员' : '普通成员' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">辈分</text>
              <text class="detail-value">{{ getGenerationText(selectedMember.generation) }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">加入时间</text>
              <text class="detail-value">{{ formatJoinDate(selectedMember.joinTime) }}</text>
            </view>
          </view>
        </view>
        <view class="modal-footer" v-if="canManageMember(selectedMember)">
          <view class="btn btn-secondary" @click="editMember">编辑信息</view>
          <view class="btn btn-danger" @click="removeMember">移除成员</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import imageHelper from '@/utils/imageHelper';
// const uQRCode = require('../../utils/uqrcode.js'); // 暂时移除二维码功能

export default {
  name: 'FamilyMembers',
  data() {
    return {
      members: [],
      currentView: 'tree', // tree | list
      showInvite: false,
      showDetail: false,
      selectedMember: null,
      showEditModal: false,
      editableMember: null,
      selectedGenerationIndex: 1, // 默认选中"同辈"
      selectedRoleIndex: 1, // 默认选中"普通成员"
      
      // QR Code related - 暂时禁用
      // qrCodeDataUrl: '',
      // qrCodeSize: 150, // 二维码尺寸
      // isGeneratingQrCode: false,
      
      // 辈分选项 - 详细版本
      generationOptions: [
        { label: '高祖辈（高祖父母）', value: -4, description: '家族的根基，传承的起点' },
        { label: '曾祖辈（曾祖父母）', value: -3, description: '承上启下的重要一代' },
        { label: '祖父母辈', value: -2, description: '慈祥的祖父母，家族的智慧' },
        { label: '父母辈', value: -1, description: '家庭的支柱，承担责任的一代' },
        { label: '同辈（配偶、兄弟姐妹）', value: 0, description: '家庭的核心，共同奋斗的伙伴' },
        { label: '子女辈', value: 1, description: '家族的希望，未来的主力' },
        { label: '孙辈', value: 2, description: '家族的传承，充满活力的新生代' },
        { label: '曾孙辈', value: 3, description: '家族的未来，承载着无限可能' },
        { label: '玄孙辈', value: 4, description: '家族血脉的延续，新的开始' }
      ],
      
      // 角色选项
      roleOptions: [
        { label: '管理员', value: 'admin' },
        { label: '普通成员', value: 'member' }
      ]
    }
  },

  computed: {
    ...mapState('user', ['userInfo']),
    ...mapState('family', ['familyInfo', 'familyMembers']),
    ...mapGetters('user', ['isAdmin']), // Using the getter from user store
  
    // 按辈分分组的成员 - 详细版本
    elderMembers() {
      return (this.members || []).filter(member => member.generation < 0)
    },
    
    sameGenMembers() {
      return (this.members || []).filter(member => member.generation === 0)
    },
    
    juniorMembers() {
      return (this.members || []).filter(member => member.generation > 0)
    },
    
    // 按具体辈分分组
    membersByGeneration() {
      const groups = {}
      const members = this.members || []
      
      members.forEach(member => {
        const gen = member.generation || 0
        if (!groups[gen]) {
          groups[gen] = []
        }
        groups[gen].push(member)
      })
      
      return groups
    },
    
    // 获取所有存在的辈分（按从长辈到晚辈排序）
    existingGenerations() {
      const generations = Object.keys(this.membersByGeneration).map(g => parseInt(g))
      return generations.sort((a, b) => a - b) // 从小到大排序：-4, -3, -2, -1, 0, 1, 2, 3, 4
    }
  },

  onLoad() {
    this.loadMembers()
  },

  onShow() {
    this.loadMembers()
  },

  onPullDownRefresh() {
    this.loadMembers().finally(() => {
      uni.stopPullDownRefresh()
    })
  },

  methods: {
    ...mapActions('family', ['getFamilyMembers', 'updateMember', 'removeMember']),

    // 加载成员列表
    async loadMembers() {
      try {
        const members = await this.getFamilyMembers()
        this.members = members || []
        console.log('加载的成员数据:', this.members)
        // 打印每个成员的详细信息
        this.members.forEach((member, index) => {
          console.log(`成员${index + 1}:`, {
            id: member.id,
            nickname: member.nickname,
            username: member.username,
            avatarUrl: member.avatarUrl,
            userAvatarUrl: member.userAvatarUrl,
            role: member.role,
            relationship: member.relationship
          })
        })
      } catch (error) {
        console.error('加载成员列表失败:', error)
        uni.showToast({
          title: '加载成员失败',
          icon: 'none'
        })
      }
    },

    // 切换视图
    switchView(view) {
      this.currentView = view
    },

    // 显示邀请弹窗
    showInviteModal() {
      this.showInvite = true;
      // 重置二维码状态
      // this.qrCodeDataUrl = '';
    },

    // 隐藏邀请弹窗
    hideInviteModal() {
      this.showInvite = false
    },

    // 显示成员详情
    showMemberDetail(member) {
      this.selectedMember = member
      this.showDetail = true
    },

    // 隐藏成员详情
    hideMemberDetail() {
      this.showDetail = false
      this.selectedMember = null
    },

    // 复制邀请码
    copyInviteCode() {
      const inviteCode = this.familyInfo?.inviteCode
      if (!inviteCode) {
        uni.showToast({
          title: '邀请码获取中',
          icon: 'none'
        })
        return
      }

      uni.setClipboardData({
        data: inviteCode,
        success: () => {
          uni.showToast({
            title: '邀请码已复制',
            icon: 'success'
          })
        }
      })
    },

    // 判断是否可以管理成员
    canManageMember(member) {
      // 管理员可以管理普通成员，不能管理自己
      return this.userInfo.role === 'admin' && 
             member.userId !== this.userInfo.id &&
             member.role !== 'admin'
    },

    // 编辑成员
    editMember() {
      // TODO: 跳转到编辑成员页面
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 移除成员
    removeMember() {
      uni.showModal({
        title: '确认移除',
        content: `确定要移除成员"${this.selectedMember.nickname}"吗？`,
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用移除成员API
            uni.showToast({
              title: '功能开发中',
              icon: 'none'
            })
          }
        }
      })
    },

    // 格式化加入日期
    formatJoinDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const now = new Date()
      const diff = now.getTime() - date.getTime()
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) return '今天'
      if (days === 1) return '昨天'
      if (days < 30) return `${days}天前`
      if (days < 365) return `${Math.floor(days / 30)}个月前`
      
      return `${Math.floor(days / 365)}年前`
    },

    // 获取辈分文本
    getGenerationText(generation) {
      if (generation < 0) return '长辈'
      if (generation === 0) return '同辈'
      if (generation > 0) return '晚辈'
      return '未知'
    },

    openEditModal(member) {
      this.editableMember = { ...member }; // Create a copy to edit
      
      // 设置辈分选择器的初始值
      const generationIndex = this.generationOptions.findIndex(option => option.value === member.generation);
      this.selectedGenerationIndex = generationIndex !== -1 ? generationIndex : 1; // 默认同辈
      
      // 设置角色选择器的初始值
      const roleIndex = this.roleOptions.findIndex(option => option.value === member.role);
      this.selectedRoleIndex = roleIndex !== -1 ? roleIndex : 1; // 默认普通成员
      
      this.showEditModal = true;
    },
    closeEditModal() {
      this.showEditModal = false;
      this.editableMember = null;
    },
    
    // 辈分选择变化
    onGenerationChange(e) {
      const index = e.detail.value;
      this.selectedGenerationIndex = index;
      if (this.editableMember) {
        this.editableMember.generation = this.generationOptions[index].value;
      }
    },
    
    // 角色选择变化
    onRoleChange(e) {
      const index = e.detail.value;
      this.selectedRoleIndex = index;
      if (this.editableMember) {
        this.editableMember.role = this.roleOptions[index].value;
      }
    },
    async handleUpdate() {
      try {
        await this.updateMember({ 
            memberId: this.editableMember.id, 
            memberData: {
                relationship: this.editableMember.relationship,
                role: this.editableMember.role,
                generation: this.editableMember.generation
            }
        });
        uni.showToast({ title: '更新成功' });
        this.closeEditModal();
        this.getFamilyMembers(); // Refresh list
      } catch (error) {
        uni.showToast({ title: '更新失败', icon: 'none' });
      }
    },
    async handleRemove(memberId) {
      // Add a confirmation dialog
      uni.showModal({
        title: '确认',
        content: '确定要移除该成员吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.removeMember(memberId);
              uni.showToast({ title: '移除成功' });
              this.getFamilyMembers(); // Refresh list
            } catch (error) {
              uni.showToast({ title: '移除失败', icon: 'none' });
            }
          }
        }
      });
    },
    // 安全获取图片URL
    safeImageUrl(url, type = 'avatar') {
      console.log('处理图片URL:', url, 'type:', type);
      if (!url) {
        console.log('URL为空，返回默认图片');
        return imageHelper.getDefaultAvatar();
      }
      if (url.startsWith('http')) {
        console.log('URL是完整HTTP地址:', url);
        return url;
      }
      const finalUrl = imageHelper.safeImageUrl(url, type);
      console.log('构建的最终URL:', finalUrl);
      return finalUrl;
    },
    
    // 获取辈分名称
    getGenerationName(generation) {
      const generationMap = {
        '-4': '高祖辈',
        '-3': '曾祖辈', 
        '-2': '祖父母辈',
        '-1': '父母辈',
        '0': '同辈',
        '1': '子女辈',
        '2': '孙辈',
        '3': '曾孙辈',
        '4': '玄孙辈'
      }
      return generationMap[generation?.toString()] || '未知辈分'
    },
    
    // 获取辈分描述
    getGenerationDescription(generation) {
      const option = this.generationOptions.find(opt => opt.value === generation)
      return option?.description || '家族成员'
    },
    
    // 获取成员节点的CSS类名
    getMemberNodeClass(generation) {
      if (generation < -2) return 'great-elder'
      if (generation === -2) return 'grandparent'
      if (generation === -1) return 'parent'
      if (generation === 0) return 'same'
      if (generation === 1) return 'child'
      if (generation === 2) return 'grandchild'
      if (generation > 2) return 'great-junior'
      return 'unknown'
    }
  }
}
</script>

<style lang="scss" scoped>
.members-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;

  .family-info {
    display: flex;
    align-items: center;

    .family-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
    }

    .family-details {
      .family-name {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .member-count {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .action-btn {
    display: flex;
    align-items: center;
    padding: 12rpx 20rpx;
    background-color: #007AFF;
    color: white;
    border-radius: 20rpx;
    font-size: 28rpx;

    .icon {
      margin-right: 8rpx;
    }
  }
}

.view-tabs {
  display: flex;
  background-color: #fff;
  margin-bottom: 20rpx;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 20rpx;
    color: #666;
    font-size: 28rpx;

    &.active {
      color: #007AFF;
      background-color: #f0f8ff;
    }

    .tab-icon {
      font-size: 36rpx;
      margin-bottom: 8rpx;
    }
  }
}

// 家族树样式
.tree-view {
  padding: 30rpx 0;

  .tree-scroll {
    white-space: nowrap;
  }

  .tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    padding: 0 30rpx;
  }

  .tree-level {
    width: 100%;
    margin-bottom: 40rpx;

    .generation-header {
      text-align: center;
      margin-bottom: 20rpx;
      
      .generation-label {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .generation-description {
        font-size: 24rpx;
        color: #666;
        font-style: italic;
      }
    }
    
    // 兼容旧版本
    .generation-label {
      text-align: center;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 30rpx;
      font-weight: bold;
    }

    .members-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30rpx;
    }
  }

  .member-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    min-width: 160rpx;

    // 详细辈分颜色
    &.great-elder {
      border-top: 4rpx solid #8b4513; // 棕色 - 高祖辈
      background: linear-gradient(135deg, #f5f5dc 0%, #ffffff 100%);
    }
    
    &.grandparent {
      border-top: 4rpx solid #daa520; // 金色 - 祖父母辈
      background: linear-gradient(135deg, #fffacd 0%, #ffffff 100%);
    }

    &.parent {
      border-top: 4rpx solid #ff6b6b; // 红色 - 父母辈
      background: linear-gradient(135deg, #ffe4e1 0%, #ffffff 100%);
    }

    &.same {
      border-top: 4rpx solid #4ecdc4; // 青色 - 同辈
      background: linear-gradient(135deg, #e0ffff 0%, #ffffff 100%);
    }

    &.child {
      border-top: 4rpx solid #45b7d1; // 蓝色 - 子女辈
      background: linear-gradient(135deg, #e6f3ff 0%, #ffffff 100%);
    }
    
    &.grandchild {
      border-top: 4rpx solid #98d8c8; // 薄荷绿 - 孙辈
      background: linear-gradient(135deg, #f0fff0 0%, #ffffff 100%);
    }
    
    &.great-junior {
      border-top: 4rpx solid #dda0dd; // 紫色 - 曾孙及以下
      background: linear-gradient(135deg, #f8f0ff 0%, #ffffff 100%);
    }
    
    // 兼容旧版本
    &.elder {
      border-top: 4rpx solid #ff6b6b;
    }

    &.junior {
      border-top: 4rpx solid #45b7d1;
    }

    .member-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-bottom: 12rpx;
    }

    .member-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 6rpx;
      text-align: center;
    }

    .member-relation {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 8rpx;
    }

    .admin-badge {
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      background-color: #ff4757;
      color: white;
      font-size: 20rpx;
      padding: 4rpx 8rpx;
      border-radius: 8rpx;
    }
  }

  .tree-connector {
    width: 100%;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;

    .connector-line {
      width: 2rpx;
      height: 40rpx;
      background-color: #ddd;
    }
  }
  
  .empty-tree {
    text-align: center;
    padding: 80rpx 40rpx;
    
    .empty-icon {
      font-size: 80rpx;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .empty-text {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 12rpx;
      display: block;
    }
    
    .empty-desc {
      font-size: 24rpx;
      color: #666;
      display: block;
    }
  }
}

// 列表样式
.list-view {
  padding: 0 30rpx;

  .members-list-container {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .member-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .member-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
    }

    .member-info {
      flex: 1;

      .member-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .member-relationship {
        font-size: 24rpx;
        color: #888;
        margin-bottom: 4rpx;
      }
      
      .member-role {
        font-size: 22rpx;
        color: #007AFF;
        background-color: #e8f4fd;
        padding: 2rpx 8rpx;
        border-radius: 8rpx;
        display: inline-block;
      }
    }

    .member-actions {
      display: flex;

      .action-btn {
        font-size: 24rpx;
        padding: 5rpx 10rpx;
        margin-left: 10rpx;
      }
      .edit-btn {
        background-color: #007aff;
        color: white;
      }
      .remove-btn {
        background-color: #ff3b30;
        color: white;
      }
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
  text-align: center;

  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 12rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 40rpx;
    line-height: 1.5;
  }

  .empty-action {
    padding: 20rpx 40rpx;
    background-color: #007AFF;
    color: white;
    border-radius: 30rpx;
    font-size: 28rpx;
  }
}

// 弹窗样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.invite-modal, .detail-modal {
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;

    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .close-btn {
      font-size: 36rpx;
      color: #666;
    }
  }

  .modal-body {
    padding: 30rpx;
  }

  .modal-footer {
    display: flex;
    padding: 30rpx;
    gap: 20rpx;

    .btn {
      flex: 1;
      text-align: center;
      padding: 24rpx;
      border-radius: 12rpx;
      font-size: 28rpx;

      &.btn-primary {
        background-color: #007AFF;
        color: white;
      }

      &.btn-secondary {
        background-color: #f5f5f5;
        color: #333;
      }

      &.btn-danger {
        background-color: #ff4757;
        color: white;
      }
    }
  }
}

// 邀请弹窗特有样式
.invite-code-section {
  margin-bottom: 40rpx;

  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
  }

  .code-container {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 12rpx;

    .invite-code {
      flex: 1;
      font-size: 32rpx;
      font-weight: bold;
      color: #007AFF;
      letter-spacing: 2rpx;
    }

    .copy-btn {
      padding: 12rpx 20rpx;
      background-color: #007AFF;
      color: white;
      border-radius: 8rpx;
      font-size: 24rpx;
    }
  }

  .code-desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
  }
}

.qr-section {
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
  }

  .qr-container {
    display: flex;
    justify-content: center;

    .qr-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 200rpx;
      height: 200rpx;
      background-color: #f8f9fa;
      border-radius: 12rpx;
      color: #999;

      .qr-icon {
        font-size: 60rpx;
        margin-bottom: 12rpx;
      }
    }
  }
}

// 成员详情弹窗特有样式
.member-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;

  .profile-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    margin-bottom: 20rpx;
  }

  .profile-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
  }

  .profile-relation {
    font-size: 28rpx;
    color: #666;
  }
}

.member-details {
  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .detail-label {
      font-size: 28rpx;
      color: #666;
    }

    .detail-value {
      font-size: 28rpx;
      color: #333;
    }
  }
}

/* Basic Modal Styles */
.modal-content {
  background-color: white;
  padding: 40rpx;
  border-radius: 20rpx;
  width: 85%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}

.form-item {
  margin-bottom: 30rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
    font-weight: 500;
  }
}

.modal-input {
  width: 100%;
  border: 1rpx solid #e0e0e0;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  background-color: #fafafa;
  
  &:focus {
    border-color: #007AFF;
    background-color: white;
  }
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  background-color: #fafafa;
  font-size: 28rpx;
  
  .picker-arrow {
    font-size: 24rpx;
    color: #999;
  }
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  gap: 20rpx;
  
  .cancel-btn, .save-btn {
    flex: 1;
    padding: 24rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    border: none;
  }
  
  .cancel-btn {
    background-color: #f5f5f5;
    color: #666;
  }
  
  .save-btn {
    background-color: #007AFF;
    color: white;
  }
}
</style> 